<template>
  <div>
    <div class="moreBtn-container">
      <div class="item-warp" v-show="moreBtn.includes('Shuaxin')" @click="() => { emit('shuaxin') }">
        <div class="img-container"> <a-image :src=Shuaxin :preview='false' /></div>
        <div class="text-container"> 刷新</div>
      </div>
      <div class="item-warp" v-show="moreBtn.includes('Zhiweibiangen')" @click="() => { emit('zhiweibiangen') }">
        <div class="img-container"> <a-image :src=Zhiweibiangen :preview='false' /></div>
        <div class="text-container"> 职位变更</div>
      </div>
      <div class="item-warp" v-show="moreBtn.includes('Bumenbiandong')" @click="() => { emit('bumenbiandong') }">
        <div class="img-container"> <a-image :src=Bumenbiandong :preview='false' /></div>
        <div class="text-container"> 部门变更</div>
      </div>
      <div class="item-warp" v-show="moreBtn.includes('Daoru')" @click="() => { emit('daoru') }">
        <div class="img-container"> <a-image :src=Daoru :preview='false' /></div>
        <div class="text-container"> 导入</div>
      </div>
      <div class="item-warp" v-show="moreBtn.includes('Daochu')" @click="() => { emit('daochu') }">
        <div class="img-container"> <a-image :src=Daochu :preview='false' /></div>
        <div class="text-container"> 导出</div>
      </div>
      <div class="item-warp" v-show="moreBtn.includes('Xinzeng')" @click="() => { emit('xinzeng') }">
        <div class="img-container"> <a-image :src=Xinzeng :preview='false' /></div>
        <div class="text-container"> 新增</div>
      </div>
      <div class="item-warp" v-show="moreBtn.includes('Lizhi')" @click="() => { emit('lizhi') }">
        <div class="img-container"> <a-image :src=Lizhi :preview='false' /></div>
        <div class="text-container"> 离职</div>
      </div>
      <div class="item-warp" v-show="moreBtn.includes('Shanchu')" @click="() => { emit('shanchu') }">
        <div class="img-container"> <a-image :src=Shanchu :preview='false' /></div>
        <div class="text-container"> 删除</div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from 'vue';
import Bumenbiandong from '@/assets/table/morebtn/bumenbiandong.png'
import Daochu from '@/assets/table/morebtn/daochu.png'
import Daoru from '@/assets/table/morebtn/daoru.png'
import Lizhi from '@/assets/table/morebtn/lizhi.png'
import Shanchu from '@/assets/table/morebtn/shanchu.png'
import Shuaxin from '@/assets/table/morebtn/shuaxin.png'
import Xinzeng from '@/assets/table/morebtn/xinzeng.png'
import Zhiweibiangen from '@/assets/table/morebtn/zhiweibiangen.png'
const props = defineProps({
  moreBtn: {
    type: Array<string>,
    default: () => [],
  },
});

const emit = defineEmits(['shuaxin',
  'zhiweibiangen',
  'bumenbiandong',
  'daoru',
  'daochu',
  'xinzeng',
  'lizhi',
  'shanchu'])

const btnMap = {
  Daoru: '导入',
  Daochu: '导出',
  Xinzeng: '新增',
  Shanchu: '删除',
  Shuaxin: '刷新',
  Zhiweibiangen: '职位变更',
  Lizhi: '离职',
  Bumenbiandong: '部门变更'
}

</script>
<style scoped lang='less'>
.moreBtn-container {
  display: flex;
  padding-bottom: 10px;

  .item-warp {
    display: flex;
    align-items: center;
    margin-right: 30px;
    cursor: pointer;
    font-size: 14px;
    .text-container {
      color: #557CB4;
    }
    .img-container {
      margin-right: 2px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>